<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@next"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
  <style>
  </style>
</head>
<body>
  <div id="app">
    Fade In:
    <input type="range" v-model="fadeInDuration" min="0" :max="maxFadeDuration" />
    Fade Out:
    <input
      type="range"
      v-model="fadeOutDuration"
      min="0"
      :max="maxFadeDuration"
    />
    <transition
      :css="false"
      @before-enter="beforeEnter"
      @enter="enter"
      @leave="leave"
    >
      <p v-if="show">hello</p>
    </transition>
    <button v-if="stop" @click="stop = false; show = false">
      Start animating
    </button>
    <button v-else @click="stop = true">Stop it!</button>
  </div>

  <script>
    const app = Vue.createApp({
      data() {
        return {
          show: true,
          fadeInDuration: 1000,
          fadeOutDuration: 1000,
          maxFadeDuration: 1500,
          stop: true
        }
      },
      mounted() {
        this.show = false
      },
      methods: {
        beforeEnter(el) {
          el.style.opacity = 0
        },
        enter(el, done) {
          var vm = this
          Velocity(
            el,
            { opacity: 1 },
            {
              duration: this.fadeInDuration,
              complete: function() {
                done()
                if (!vm.stop) vm.show = false
              }
            }
          )
        },
        leave(el, done) {
          var vm = this
          Velocity(
            el,
            { opacity: 0 },
            {
              duration: this.fadeOutDuration,
              complete: function() {
                done()
                vm.show = true
              }
            }
          )
        }
      }
    })

    app.mount('#app')
  </script>
</body>
</html>